<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Hello queue</title>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.0.0/sockjs.min.js"></script>
    <script type="text/javascript">
        var stompClient = null;
        var userId = "271357058761228288";
        function setConnected(connected){
            document.getElementById("connect").disabled = connected;
            document.getElementById("disconnect").disabled = !connected;

            document.getElementById('response').innerHTML = "连接。。。。";
        }
        function connect() {
            var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJicmlkZ2V6biIsInNjb3BlIjpbIioiXSwibG9naW5OYW1lIjoiYnJpZGdlem4iLCJleHAiOjE1NzkwODAwODEsImF1dGhvcml0aWVzIjpbIjYiLCI3IiwiMjkzNDQ1NzE4OTc3NDEzMTIwIl0sImp0aSI6ImI3OGY0ODJiLTVhYTQtNDk1Yy04N2VkLTgxNTBkYzI3ZWVjZiIsImNsaWVudF9pZCI6Inl1a2UtY2xpZW50LXVhYyIsInRpbWVzdGFtcCI6MTU3OTA3Mjg4MTc0OX0.Ax1EBnqYpaaLiPiAwS_B47YlV26wVL_zlBlVU6CCQ6E";
            //var socket = new SockJS("http://192.168.3.64:8030/webSocketServer?token="+token);
            var socket = new SockJS("http://192.168.3.122:8030/webSocketServer?token="+token);
            stompClient = Stomp.over(socket);
            stompClient.connect(
                {name:"271357058761228288"},
                function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                    document.getElementById('response').innerHTML = "连接。。。。";


                stompClient.subscribe('/topic/boastMsg', function (message) {
                    var response1 = document.getElementById('response');
                    var p = document.createElement('p');
                    p.style.wordWrap = 'break-word';
                    p.appendChild(document.createTextNode(message.body.toString()));
                    response1.appendChild(p);
                });

                stompClient.subscribe('/user/' + userId + '/queue/message', function (message) {
                    var response1 = document.getElementById('response');
                    var p = document.createElement('p');
                    p.style.wordWrap = 'break-word';
                    p.appendChild(document.createTextNode(message.body.toString()+"##############"));
                    response1.appendChild(p);
                });

                stompClient.subscribe('/user/1/queue/message', function (message) {
                    var response1 = document.getElementById('response');
                    var p = document.createElement('p');
                    p.style.wordWrap = 'break-word';
                    p.appendChild(document.createTextNode(message.body.toString()+"@@@@@@@"));
                    response1.appendChild(p);
                });
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
            document.getElementById('response').innerHTML = "断开连接。。。。";
        }

        function sendName() {
            var name = document.getElementById('text1').value;
            var messageJson = JSON.stringify({ "msg": name });
            stompClient.send("/app/startChat", {}, messageJson);

            setMessageInnerHTML("/user/1/startChat 你发送的消息:" + name);
        }


        //发送消息
        function send() {
            var message = document.getElementById('text2').value;
            var messageJson = JSON.stringify({ "chatMsg": message,"sendName":"bridgezn","sendId":"271357058761228288","sendPic":"group1/M00/00/0A/wKgDeV4ZlsyAKytPAAAc2NJpuRo082.png" });

            stompClient.send("/app/boastMsg", {}, messageJson);
            setMessageInnerHTML("/app/boastMsg 你发送的消息:" + message);
        }

        function testToUser() {
            var message = document.getElementById('text3').value;
            var messageJson = JSON.stringify({ "chatMsg": message,"sendName":"bridgezn","sendId":"271357058761228288","sendPic":"group1/M00/00/0A/wKgDeV4ZlsyAKytPAAAc2NJpuRo082.png" });
            stompClient.send("/app/startChat", {}, messageJson);
            setMessageInnerHTML("/user/1/queue/message 你发送的消息:" + message);
        }
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }
    </script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div>
    <div>
        <labal>用户</labal><input type="text" id="user" />
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
        <labal>名字</labal><input type="text" id="text1" />
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>

    <div id="converDiv">
        <labal>广播消息</labal><input type="text" id="text2" />
        <button id="send" onclick="send();">Send</button>

    </div>
    <div id="conDiv">
        <labal>一对一消息</labal><input type="text" id="text3" />
        <button id="testToUser" onclick="testToUser();">testToUser</button>

    </div>
    <div id="message"></div>
</div>

</body>
</html>